<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>左右过度切换的登录注册页面演示</title>
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div class="content">
        <div class="form sign-in">
            <h2>欢迎回来</h2>
            <label>
                <span>用户名</span>
                <input type="text" id="login_username" />
            </label>
            <label>
                <span>密码</span>
                <input type="password" id="login_password" />
            </label>
            <button type="button" class="submit" id="login_btn">登 录</button>
        </div>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in" id="btn">登 录</span>
                </div>
            </div>
            <div class="form sign-up">
                <h2>立即注册</h2>
                <label>
                    <span>用户名</span>
                    <input type="text" id="register_username" />
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" id="register_password" />
                </label>
                <button type="button" class="submit" id="register_btn">注 册</button>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
    <script src="js/jQuery.3.6.2.js"></script>
</body>
<script>
    // 注册逻辑


    $('#register_btn').click((e) => {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/facial/register',
            data: {
                username: $('#register_username').val(),
                password: $('#register_password').val()
            },
            dataType: 'json',
            success: (data) => {
                console.log(data);
                if (data.code == 200) {

                    //  清空注册输入框
                    $('#register_username').val('');
                    $('#register_password').val('');
                    // 弹窗提示用户注册成功！ 前去登录
                    alert(data.message);
                    $('#btn').click();
                }
            },
            fail: (err) => {
                console.log(err);
            }
        })
    })





    //登录逻辑

    $('#login_btn').click((e) => {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/facial/login',
            data: {
                lusername: $('#login_username').val(),
                lpassword: $('#login_password').val()
            },
            dataType: 'json',
            success: (data) => {
                console.log(data);
                if (data.code == 200) {
                    // 弹窗提示用户登录成功!
                    alert(data.message);
                    // 登录成功跳转到前端首页
                    location.href = '/';
                    // 清空输入框
                    $('#login_username').val('');
                    $('#login_password').val('');
                }else if(data.code == 401){
                    alert(data.message);
                    // 清空登录输入框
                    $('#login_passwords').val('');
                }else{
                    alert(data.message);
                    $('#login_username').val('');
                    $('#login_password').val('');
                }
            },
            fail: (err) => {
                console.log(err);
            }
        })
    })



</script>

</html>